<template>
  <div>
    <el-container>
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>数据应用</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">车辆备案查询</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
        <div class="inside-main-box">
           <el-row class="inside-main" style="height: 86px">
            <el-col :span="5" style="margin-left: 20px">
              <el-form-item label="申请时间" size="small">
                <el-date-picker clearable v-model="form.startDateTime" type="date" placeholder="选择时间" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <span>-</span>
            <el-col :span="4">
              <el-form-item label="" size="small">
                <el-date-picker clearable v-model="form.endDateTime" type="date" placeholder="选择时间" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="车牌号" size="small">
                <el-input clearable v-model="form.cl_cph" placeholder="请输入车牌号" />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="司机" size="small">
                <el-input clearable v-model="form.sj_name" placeholder="请输入司机姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="出入类型" size="small">
                <el-select clearable v-model="form.typeOfAcces" placeholder="请选择">
                  <el-option label="入厂" value="入厂" />
                  <el-option label="出厂" value="出厂" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 20px">
              <el-form-item  label="受访部门" size="small">
                <el-input clearable v-model="form.bumen_type" placeholder="请输入受访部门" />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left: 5px">
              <el-form-item label="受访人员" size="small">
                <el-input clearable v-model="form.bumen_name" placeholder="请输入受访人员" />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-left: 20px">
              <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
              <el-button size="small" class="empty-but" icon="refresh" @click="onReset">重置</el-button>
              <el-button size="small" class="empty-but" icon="download" @click="exportExcel">导出</el-button>
            </el-col>
          </el-row>
        </div>

        <!-- 导入弹出框 -->
        <el-dialog style="width: 600px" v-model="dialogTableVisible" center title="导入文件">
          <el-upload v-model:file-list="fileList" class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
            :limit="3" :on-exceed="handleExceed" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">
              将文件托到此处或<em>点击导入</em>
              <p>
                按住Ctrl可同时多选,支持上传rar/zip格式文件,如果没有模板<em>点击下载</em>
              </p>
            </div>
            <template #tip>
              <div class="el-upload__tip"></div>
            </template>
          </el-upload>
        </el-dialog>
         <div style="height: 10px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
         </div>
        <div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column  align="center" type="index" label="序号"  width="80px"/>
          <!--  <el-table-column align="center" prop="status_a" label="通行状态" show-overflow-tooltip  >
               <template #default="scope">
                 <el-button v-if="scope.row.status_a==1" link type="warning" size="small">待审核</el-button>
                 <el-button v-if="scope.row.status_a==2" link type="success" size="small">已通过</el-button>
                 <el-button v-if="scope.row.status_a==3" link type="danger" size="small">已拒绝</el-button>
                 <el-button v-if="scope.row.status_a==4" link type="warning" size="small">草稿</el-button>
              </template>
            </el-table-column>
            -->
            <el-table-column align="center" prop="typeOfAcces" label="类型" show-overflow-tooltip />
            <el-table-column align="center" prop="accessControl" label="门禁号" show-overflow-tooltip  />
            <el-table-column align="center" prop="gateno"  label="道闸编号" width="150px" show-overflow-tooltip />
            <el-table-column align="center" prop="cl_cph" label="车牌" show-overflow-tooltip  />
            <el-table-column align="center" prop="sj_name" label="司机"  show-overflow-tooltip />
            <el-table-column align="center" prop="sj_phone" label="司机电话" width="100px" show-overflow-tooltip />
            <el-table-column align="center" prop="applicant" label="申请人"  show-overflow-tooltip />
            <el-table-column align="center" prop="applicationTime" label="申请时间" width="180px" show-overflow-tooltip
               :formatter="function(row,column){ if(row.applicationTime){ return $moment(row.applicationTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" prop="accessTime" label="出入时间" width="180px" show-overflow-tooltip
              :formatter="function(row,column){ if(row.accessTime){ return $moment(row.accessTime).format('YYYY-MM-DD')  }else{  return '' }}" />
            <el-table-column align="center" prop="vehicleEmissions" label="排放阶段" show-overflow-tooltip />
            <el-table-column align="center" prop="cl_sbm" label="车辆识别代码(VIN)" width="180px"/>
            <el-table-column align="center" prop="cl_fdjhm" label="发动机号码" show-overflow-tooltip />
            <el-table-column align="center" prop="zcrq" label="注册时间" show-overflow-tooltip
             :formatter="function(row,column){ if(row.zcrq){ return $moment(row.zcrq).format('YYYY-MM-DD')  }else{  return '' }}" />
            <el-table-column align="center" prop="cargo_type" label="运输货物" show-overflow-tooltip  />
            <el-table-column align="center" prop="cl_huowushuliang" label="运输货量/吨" show-overflow-tooltip />
            <el-table-column align="center" fixed="right" label="操作"  width="220" >
              <template #default="scope">
                <el-button link type="success" icon="check" size="small" @click="whiteList(scope.row)">白名单</el-button>
                <el-button link type="danger" icon="close" size="small" @click="blackList(scope.row)">黑名单</el-button >
              </template>
           </el-table-column>
          </el-table>
          <el-pagination style="margin-top: 8%;margin-right:40px; display: flex; justify-content: flex-end"  v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
           :small="small"  :disabled="disabled" :background="background" layout="prev, pager, next, jumper,total"
           :total="queryInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Plus, UploadFilled } from "@element-plus/icons-vue";
import {
    selectAllFiling,
  selectQueryFiling
} from "@/api/mobilePollution"
// 路由
import { useRouter } from "vue-router";
// 文件导入
import { ElMessage, ElMessageBox } from "element-plus";
import * as XLSX from "xlsx";
import moment from "moment";
const router = useRouter();
onMounted(() => {
  selectQuery();
});
let table = reactive({
  rows: [],
  total: 0,
});
//分页
const queryInfo = reactive({
  pagenum:1,
  pagesize:10,
  total:""
})
const handleSizeChange = (val) => {
  queryInfo.pagesize = val
  selectQuery()
}
//点击第几页
const handleCurrentChange = (val) => {
  queryInfo.pagenum = val
  selectQuery()
}
//查询全部
const select = () => {
  selectQueryFiling({pageNum:queryInfo.pagenum,pageSize:queryInfo.pagesize}).then((res)=>{
    tableData.value = res.data.list;
    queryInfo.total=res.data.total;
  })
}

//根据条件查询
const selectQuery = () => {
  if (form.startDateTime){
    let startDate = moment(form.startDateTime).format('YYYY-MM-DD')
    form.startDateTime =  startDate
  }
  if (form.endDateTime){
    let endDate = moment(form.endDateTime).format('YYYY-MM-DD')
    form.endDateTime =  endDate
  }
  form.pageNum = queryInfo.pagenum
  form.pageSize = queryInfo.pagesize
  selectQueryFiling(form).then((res)=>{
    tableData.value = res.data.list
    queryInfo.total=res.data.total;
  })

}
const form = reactive({
  // startDateTime: "",
  // endDateTime: "",
  // cl_cph: "",
  // sj_name: "",
  // typeOfAcces: "",
  // bumen_type: "",
  // bumen_name:""
});
// 重置
const onReset = () => {
  form.startDateTime = "";
  form.endDateTime = "";
  form.cl_cph = "";
  form.sj_name = "";
  form.typeOfAcces = "";form.bumen_type = "";
  form.bumen_name = "";
  queryInfo.pagesize ='10';
  queryInfo.pagenum='1'
  selectQuery()

};
// 表格假数据
const tableData = ref()
const exportExcel = () => {
  const data = XLSX.utils.json_to_sheet(tableData.value); //此处tableData.value为表格的数据
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, data, "test-data"); //test-data为自定义的sheet表名
  XLSX.writeFile(wb, "车辆备案查询.xlsx"); //test.xlsx为自定义的文件名
};
//跳转至黑名单新增信息
const blackList = (row) => {
  ElMessageBox.confirm("确定要添加该车辆至黑名单吗?").then(()=>{
    localStorage.setItem("blackListCph", JSON.stringify(row.cl_cph));
    router.push({
      path:'/blackListIndex',
      query:{
        // cph :row.cl_cph
      }
    })
  })
}
//跳转至白名单新增信息
const whiteList = (row) => {
  ElMessageBox.confirm("确定要添加该车辆至白名单吗?").then(()=>{
    localStorage.setItem("whiteListCph",JSON.stringify(row.cl_cph))
    router.push({
      path:'/whiteListIndex',
    })
  })
}
</script>
<style scoped>
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}

.add-but {
  background: #dde5fe;
  color: #3780b9;
}
/* 分页 */

.demo-pagination-block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
